<template>
  <div  class="article">
    <template v-if="article">
      <h2>标题：{{ article.get('title') }}
      </h2>
      <span class="font1">（ author: {{ article.get('author').get('username') }}&nbsp;&nbsp;cate: {{ article.get('category_name') }}
    ）
    </span>
      <div v-if="uid !== article.get('author').id"  class="like">
        <span @click="addLike(article.get('like_num'))"  class="like-add"><i class="fa fa-thumbs-o-up " aria-hidden="true"></i>{{(article.get('like_num'))}}</span>
        <span @click="addDisLike(article.get('dislike_num'))" class="like-add"><i class="fa fa-thumbs-o-down " aria-hidden="true"></i>{{(article.get('dislike_num'))}} </span>
      </div>
      <el-card class="box-card">
        <div class="content" v-html="article.get('content')" ></div>
        <!--图片-->
        <div v-if="article.get('article_img')" class="img">
          <img v-lazy="article.get('article_img')" alt="" width="100px" height="100px">
        </div>
        <div v-else>
          <img v-lazy="" alt="没有图片" width="100px" height="100px">
        </div>
        <div class="gift" v-if="uid == article.get('author').id === false">
          <el-popover
            ref="popover1"
            placement="top-start"
            title="打赏需知"
            width="200"
            trigger="hover"
            content="送花代表5个简币，送车代表30个简币，送飞机代表100个简币,打赏要谨慎哦！！！！！"
          >
          </el-popover>
          <el-button v-popover:popover1>打赏</el-button>
          <span @click="addFlower(article.get('flower_num'))"><img src="../../assets/img/flower.png" width="50px" height="80px"/>{{article.get('flower_num')}}个简币</span>
          <span @click="addCar(article.get('car_num'))"><i class="fa fa-car fa-4x" aria-hidden="true"></i>{{article.get('car_num')}}个简币</span>
          <span @click="addFly(article.get('fly_num'))"><i class="fa fa-fighter-jet fa-4x" aria-hidden="true"></i>{{article.get('fly_num')}}个简币</span>
        </div>
        <!--删除-->
        <div class="delete" v-if="uid == article.get('author').id">
          <router-link :to="{ name:'ArticleEdit', params: {id: article.id} }"  tag="el-button">修改</router-link >
          <el-button type="primary" icon="delete"  @click="destroy">删除</el-button>
        </div>
        <!--发布评论-->
        <div class="comment"  v-if="uid !== article.get('author').id ">
          <el-form ref="form" :model="form" :rules="rules"    label-position="left"  class="form">
            <el-form-item label="评论" prop="comment">
              <el-input type="textarea" v-model="form.comment"></el-input>
            </el-form-item>
            <div class="oprator">
              <el-button class="submit" type="primary" @click="submit" @keyup.enter="submit">确定</el-button>
            </div>
          </el-form>
        </div>
        <hr>
        <!--评论区-->
     <!--   {{ article.get('comment') }}&nbsp;-->
        <div class="comment-info" v-if="uid !== article.get('author').id ">
          <ul class="list-group overflower" >
            <li class="list-group-item" v-for="(n,index) in 10">
              <span class="badge" >{{index}}</span>
              <span class="text">{{article.get('comment_text')}}</span>
            </li>
          </ul>

        </div>

      </el-card>


    </template>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {

    name: 'index',

    data () {
      return {
        article: null,
        form: {
          comment:''
        },
        rules: {
          comment: [
            { required: true, message: "必须填写性别哦!", trigger: 'blur' },
          ],
        },
        validate: {
          error: false
        }
        /* likeNumber:null*/

      };
    },
    created(){
      const id = this.$route.params.id;
      this.getArticle(id);
    },
    computed: {
      ...mapGetters(['uid'])
    },
    methods: {
      getArticle(id){
        const q = new this.$api.SDK.Query('Article');
        q.include('author');
        q.get(id).then((article) => {
          this.article = article;
          this.$Progress.finish();
        }).catch(console.log)
      },
      destroy(){
        this.article.destroy().then(() => {
          this.$message({type:'success', message: '删除成功'});
          this.$router.replace({path:'/article?type=all'});
        })
      },
      addComment(){
        this.article.set('comment_text',this.form.comment)
        this.article.save().then(() => {
          this.$message({type:'success', message: '编辑成功'});
          this.$router.replace({path:'/article/'+this.$route.params.id});
        })


      },
      submit(){
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.addComment()
          } else {
            console.log('error submit!!');
            this.$message.error('错了哦，您填写的信息有错误，请按照提示修改。');
            return false;
          }
        })
      },
        addLike(val) {
          this.article.set('like_num', val+1);
          // 保存到云端
          this.article.save()
          console.log("***************************88")
          console.log(this.article)
          this.$message({type:'success', message: '点赞成功'});
          this.$router.replace({path:'/article/'+this.$route.params.id});
          },
        addDisLike(val){
          console.log(val)
          this.article.set('dislike_num', val-1);
          // 保存到云端
          this.article.save();
          this.$router.replace({path:'/article/'+this.$route.params.id});
        },
        addFlower(val) {
          console.log(val)
          this.article.set('flower_num', val+5);
          this.$message({type:'success', message: '+5'});
          // 保存到云端
          this.article.save();
          this.$router.replace({path:'/article/'+this.$route.params.id});
        },
        addCar(val) {
          console.log(val)
          this.article.set('car_num', val+30);
          this.$message({type:'success', message: '+30'});
          // 保存到云端
          this.article.save();
          this.$router.replace({path:'/article/'+this.$route.params.id});
        },
        addFly(val) {
          console.log(val)
          this.article.set('fly_num', val+100);
          this.$message({type:'success', message: '+100'});
          // 保存到云端
          this.article.save();
          this.$router.replace({path:'/article/'+this.$route.params.id});
        },

    }
  }
</script>

<style lang="css" scoped>
  .delete{
    margin-top: 40%;
  }
  .font1{
    font-weight: 100;
    font-size:16px;
  }
  .box-card{
    width: 90%;
    height: 800px;
    margin: 0 auto;
    margin-top: 20px;
    overflow: scroll;
    overflow-x: hidden;
  }
  .img{
    margin-top: 20px;
  }
  .article{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 20px;
  }
  .comment{
    position: relative;
  }
  .form{
    width: 80%;
  }
  .oprator{
    position: absolute;
    right: 0;
    top: 50px;
  }
  .like{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
  }
  .like span{
    display: inline-block;
    color: #adadad;
    border: 1px solid #adadad;
    border-radius: 12px;
    width: 100px;
    height: 35px;
    font-size: 26px;
  }
  .like span:hover{
    border: 1px solid #55acee;
    color: #55acee;
  }
  .gift{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row;
    font-family: PingFangSC-Regular;
    color: #999999;
    letter-spacing: 0;
    margin-top: 20px;
    width: 100%;
    padding: 20px;
    border: 1px solid #f2f2f2;
    border-left: none;
    border-right: none;
  }
  .gift span{display: inline-block;
  }
  .el-button{
    background-color: #333333!important;
    color: #ffffff!important;
  }
</style>
